﻿@model IEnumerable<YoutubeVideo>

@{
    ViewBag.Title = "Videos";
}

<h2>Videos</h2>

<table id="videos">
    <thead>
        <th>Icon</th>
        <th>Title</th>
        <th>Description</th>
        <th>Youtube GUID</th>
        <th>Action</th>
    </thead>
    @foreach (var video in Model)
    {
        var videoId = "video-" + @video.YoutubeVideoID;
        <tr class="video" id="@videoId">
            <td>
                <img src="@video.IconUrl" alt="@video.VideoTitle" />
            </td>
            <td style="vertical-align:top">
                @video.VideoTitle
            </td>
            <td style="vertical-align:top">
                @video.VideoDescription
            </td>
            <td style="vertical-align:top">
                @video.YoutubeGuid
            </td>
            <td class="actionCall">
                @Ajax.ActionLink("Delete",
                                 "Delete",
                                 "Video",
                                 new { id = @video.YoutubeVideoID },
                                 new AjaxOptions {
                                     UpdateTargetId = videoId,
                                     OnSuccess = String.Format("removeVideo('#{0}')", videoId),
                                     HttpMethod = "GET"                                     
                                 })
            </td>
        </tr>
    }
</table>
<script type="text/javascript">
    function paintTable() {
        $("tr:odd").css("background-color", "#d2deea");
    }

    function removeVideo(videoId) {
        $(videoId).remove();
        $("tr").css("background-color", "#fff");
        paintTable();
    }

    $(window).load(paintTable);
</script>